var oUl1 = document.getElementById('oUl1');
var oUl2 = document.getElementById('oUl2');
var oPre = document.getElementsByClassName('pre')[0];
var oAfter = document.getElementsByClassName('after')[0];
var oLi1 = oUl1.getElementsByTagName('li');
var oLi2 = oUl2.getElementsByTagName('li');
var oContent = document.getElementsByClassName('content')[0];
var timer = null;
var weizhi = oUl1.offsetLeft;
oUl1.style.width = oLi1[0].offsetWidth * oLi1.length + 'px';
oPre.onclick = function () {
    if (weizhi - oUl1.offsetLeft == oUl1.offsetWidth - oLi1[0].offsetWidth) {
        oUl1.style.left = weizhi + 'px';
    }else {
        oUl1.style.left = (oUl1.offsetLeft - oLi1[0].offsetWidth) + 'px';
    }
    point();
}
oAfter.onclick = function () {
    if (oUl1.offsetLeft == weizhi ) {
        oUl1.style.left = -(oUl1.offsetLeft + oUl1.offsetWidth - oLi1[0].offsetWidth) + 'px';
    }else {
        oUl1.style.left = (oUl1.offsetLeft + oLi1[0].offsetWidth) + 'px';
    }
    point();
}
oContent.onmouseover = function() {
    clearInterval(timer);
}
oContent.onmouseout = function() {
    // clearInterval(timer);
    timer = setInterval(function () {
        if (oUl1.offsetLeft == weizhi ) {
            oUl1.style.left = -(oUl1.offsetLeft + oUl1.offsetWidth - oLi1[0].offsetWidth) + 'px';
        }else {
            oUl1.style.left = (oUl1.offsetLeft + oLi1[0].offsetWidth) + 'px';
        }
        point();
    },1000);
}
for (var i=0;i<oLi2.length;i++) {
    oLi2[i].index = i;
    oLi2[i].onclick = function () {
        oUl1.style.left = -oLi1[0].offsetWidth*this.index + 'px';
        point();
    }  
}
timer = setInterval(function () {
    if (oUl1.offsetLeft == weizhi ) {
        oUl1.style.left = -(oUl1.offsetLeft + oUl1.offsetWidth - oLi1[0].offsetWidth) + 'px';
    }else {
        oUl1.style.left = (oUl1.offsetLeft + oLi1[0].offsetWidth) + 'px';
    }
    point();
},1000);
function point() {
    flag = -oUl1.offsetLeft/oLi1[0].offsetWidth;
    for (var i=0;i<oLi2.length;i++) {
        oLi2[i].style.backgroundColor = "#ccc";
    }
    // console.log(flag);
    if (flag==0) {
        oLi2[flag].style.backgroundColor = "red";
    }else {
        oLi2[oLi2.length-flag].style.backgroundColor = "red";
    }
}